import React from 'react'
import { Button, Icon } from 'antd'
import { Spin, Alert } from 'antd'

import fetchJSONP from 'fetch-jsonp'


export default class MovieDetail extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            info: {},
            isloading: true
        }
    }
    componentWillMount() {
        fetchJSONP('https://douban.uieee.com/v2/movie/subject/'+this.props.match.params.id)
        .then(response => response.json())
            .then(data => {
                this.setState({
                    info: data,
                    isloading: false
                })
                console.log(data);
            })
        console.log(this.props.match.params.id);

    }


    render() {
        return <div>
            {this.renderList()}
        </div>
    }


    goBack = () => {
        this.props.history.go(-1)
    }

    renderList = () => {
        if (this.state.isloading == true) {
            return <Spin tip="Loading...">
                <Alert
                    message="Alert message title"
                    description="Further details about the context of this alert."
                    type="info"
                />
            </Spin>
        }
        else {
            return <div>
                <Button type="primary" onClick={this.goBack}>
                    <Icon type="left" />
                    Backward
                </Button>
                <div style={{ textAlign: 'center' }}>
                    <h1>{this.state.info.title}</h1>

                    <img src={this.state.info.images.large} alt="" />
                </div>

                <p style={{ textIndent: '2em', lineHeight: '30px' }}>{this.state.info.summary}</p>
            </div>
        }
    }
}